<template>
  <div class="detail-page">
    <div class="rich-text" v-html="content" />
    <div v-if="type !== 'lesson'" class="question-wrapper">
      <van-divider>题目</van-divider>
      <g-question
        v-model="form.answer"
        v-bind="question"
        :disabled="answered"
      />
      <van-button
        v-if="!answered"
        size="large"
        type="primary"
        :disabled="!form.answer"
        @click="saveAnswer"
        >提交答案</van-button
      >
    </div>
    <fixed-bottom v-if="detail.homeWork" :text="btn" @click="toTask" />
  </div>
</template>

<script>
import { getLesson, getKnowledge, saveAnswer, saveHomeScore } from "./api";
import Taro from "@tarojs/taro";
import FixedBottom from "@/components/FixedBottom";
import { Divider } from "vant";
import GQuestion from "@/components/Question.vue";
import { formatQuestion } from "@/utils";
import { Button } from "vant";
import api from "@/config";
import dayjs from "dayjs";
import SportPage from "./components/SportPage.vue";

export default {
  components: {
    GQuestion,
    FixedBottom,
    [Button.name]: Button,
    [Divider.name]: Divider,
    SportPage
  },
  data() {
    return {
      detail: "",
      type: "",
      question: {},
      form: {
        answer: ""
      },
      answered: true,
      startTime: null,
      articleId: ""
    };
  },
  computed: {
    api() {
      return this.type === "lesson" ? getLesson : getKnowledge;
    },
    btn() {
      return this.detail.comment ? "修改作业" : "去完成作业";
    },
    content() {
      if (!this.detail) {
        return "";
      }
      return this.detail.content
        .replace(/<embed/g, "<video enable-auto-rotation ")
        .replace('loop="true"', "");
    },
    videoUrl() {
      if (this.type !== "sport" || !this.detail) {
        return "";
      }
      return api.base + this.detail.videoUrl;
    }
  },
  onLoad(options) {
    this.articleId = options.id;
    this.type = options.type;
    this.setTime();
    this.getDetail(options);
  },
  onShow(data) {
    if (data.id) {
      this.getDetail(data);
    }
  },
  onUnload() {
    if (this.type === "sport" && this.detail.article) {
      const duration = parseInt(dayjs().diff(this.startTime, "m", true) + 0.5);
      saveHomeScore({
        groupId: this.detail.id,
        duration
      });
    }
  },
  methods: {
    async saveAnswer() {
      await saveAnswer(this.form);
      this.showMsg("已提交", "success");
      this.answered = true;
      this.question.answer = this.form.answer;
      this.question.correct = this.form.correct;
    },
    async getDetail({ id, type }) {
      const data = await this.api(id);
      this.detail = data;
      console.log("detail", data);
      if (type !== "lesson") {
        this.setQuestion(data);
      }
      Taro.setNavigationBarTitle({
        title: data.title
      });
    },
    setQuestion(data) {
      const { article, answer = {} } = data;
      this.question = formatQuestion({
        ...article,
        ...(answer || { answer: "" })
      });
      this.form = {
        articleId: article.id,
        answer: answer.answer,
        correct: answer.correct || article.answer
      };
      this.answered = Boolean(data.answer);
    },
    toTask() {
      const { article, comment = {} } = this.detail;
      const { id, name: topic } = article;
      const params = {
        id,
        topic,
        taskId: comment.id
      };
      this.toPage("/pages/task/index", params);
    },
    setTime() {
      if (this.type === "sport") {
        this.startTime = dayjs();
      }
    }
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
